<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div class="app">
    <h1>{{name}}</h1>
    <h2>{{obj.a}}</h2>
    <button @click="obj.a++">+1</button>
  </div>

  <script>
    let vm = new Vue({
      el: ".app",
      data() {
        return {
          name: "码路教育",
          obj: {
            a: 1,
          },
          a: 111,
        }
      },
      computed: {
        obj1() {
          return JSON.parse(JSON.stringify(this.obj))
        }
      },
      // 深度侦听时，如何得到旧值？
      // 答：使用计算属性把原生的数据深copy一份，侦听计算属性。
      watch: {
        obj1: {
          deep: true,
          handler(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
          }
        }
      }
    });
  </script>
</body>

</html>